var cookieInitFlag = true;
var cookieNumber = 1;

function setCookieModalShow() {
    if (cookieInitFlag) {
        cookieInitFlag = false;
        initAllCookie();
    }
    $("#setCookie").modal('show');
    initCheck2Cookie();
}

function addCokie(key, value, init) {
    var htmlTem =
        '<tr id="cookies-' + cookieNumber + '">' +
        '    <td><input disabled id="cookie-checkbox-' + cookieNumber + '" type="checkbox" class="i-checks" name="cookieSelect"></td>' +
        '    <td><input id="cookie-key-' + cookieNumber + '" type="text" name="cookie-key-' + cookieNumber + '" onkeyup="checkboxRemoveDisabled(\'cookie-\',\'' + cookieNumber + '\')"></td>' +
        '    <td><input id="cookie-value-' + cookieNumber + '" type="text" name="cookie-value-' + cookieNumber + '" onkeyup="checkboxRemoveDisabled(\'cookie-\',\'' + cookieNumber + '\')"></td>' +
        '    <td>' +
        '        <a href="JavaScript:void(0)" style="color: red;font-size: 20px" onclick="delCookie(\'cookies-' + cookieNumber + '\')">' +
        '            <span class="glyphicon glyphicon-remove"></span>' +
        '        </a>' +
        '    </td>' +
        '</tr>'
    ;
    $("#cookie").append(htmlTem);
    if (key && value) {
        $("#cookie-key-" + cookieNumber).val(key);
        $("#cookie-key-" + cookieNumber).attr('disabled', true);
        $("#cookie-value-" + cookieNumber).val(value);
        $("#cookie-value-" + cookieNumber).attr('disabled', true);
        $("#cookie-checkbox-" + cookieNumber).iCheck('check');
        $("#cookie-checkbox-" + cookieNumber).iCheck('enable');
    } else if (init) {
        $("#cookies-" + cookieNumber).remove();
    }
    cookieNumber += 1;
    initCheck2Cookie();
}

function delCookie(cookieId) {
    var key = $("#" + cookieId.replace('cookies-', 'cookie-key-')).val();
    setCookie(key, null);
    $("#" + cookieId).remove();
}

function setCookie(key, value) {
    $.Cookie(key, value);
}

function initAllCookie() {
    var cookiestr = document.cookie;
    if (cookiestr) {
        var cookies = cookiestr.split('; ');
        $.each(cookies, function (index, k) {
            var cookie = k.split('=');
            addCokie(cookie[0], cookie[1], true);
        })
    }
}

function initCheck2Cookie() {
    $(".i-checks").iCheck({
            checkboxClass: "icheckbox_square-green",
            radioClass: "iradio_square-green"
        }
    );
    $("#cookie .i-checks").on('ifChecked', function (ent) {
        var keyIdFlag = $(this).attr('id').replace('cookie-checkbox-', 'cookie-key-');
        var valueIdFlag = $(this).attr('id').replace('cookie-checkbox-', 'cookie-value-');
        var key = $('#' + keyIdFlag).val();
        var value = $('#' + valueIdFlag).val();
        if (!(key && value)) {
            alert("key and value is not null!");
        } else {
            $('#' + keyIdFlag).attr('disabled', true);
            $('#' + valueIdFlag).attr('disabled', true);
            setCookie(key, value);
        }
    });
    $("#cookie .i-checks").on('ifUnchecked', function (ent) {
        var keyIdFlag = $(this).attr('id').replace('cookie-checkbox-', 'cookie-key-');
        var valueIdFlag = $(this).attr('id').replace('cookie-checkbox-', 'cookie-value-');
        var key = $('#' + keyIdFlag).val();
        $('#' + keyIdFlag).attr('disabled', false);
        $('#' + valueIdFlag).attr('disabled', false);
        setCookie(key, null);
    })
}